<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-header style="background-color: #0ba8ea; height: 8vh">
      <h1 style="display: inline-block">酒席管理系统</h1>
      <div style="height: 100%; float: right">
        <el-popover placement="top" width="300" v-model="visible" v-if="powers.length>0">
            <span>切换身份</span>
            <br><br>
            <label v-for="(items,index) in powers" :key='index'><el-button @click="switchPowerName(index)" style="width:300px">{{ items.powerName }}</el-button><br><br></label>
            <el-button @click="switchPowerName(null)" style="width:300px">普通用户</el-button>
            <div style="text-align: right; margin-top: 20px">
              <el-button size="mini" type="text" @click="visible = false"
                >取消</el-button
              >
            </div>
          <el-button
            slot="reference"
            type="text"
            style="color: #000; margin-top: 40%"
            >切换身份</el-button
          >
        </el-popover>
      </div>
    </el-header>
    <el-container style="border: 1px solid #eee">
      <el-aside width="25vh" style="border: 1px solid #eee">
        <el-menu :default-openeds="[]">
          <el-menu-item index="1">
            <template slot="title">
              <i class="el-icon-house"></i>首页
            </template>
          </el-menu-item>
          <el-submenu index="2" v-if="Object.keys(this.thisPower).length===0">
            <template slot="title">
              <i class="el-icon-setting"></i>酒席
            </template>
            <el-menu-item index="2-1">送礼</el-menu-item>
            <el-menu-item index="2-2">收礼</el-menu-item>
            <el-menu-item index="2-3">礼薄管理</el-menu-item>
            <el-menu-item index="2-4">酒席申请</el-menu-item>
          </el-submenu>
          <el-submenu index="3" v-if="Object.keys(this.thisPower).length===0">
            <template slot="title">
              <i class="el-icon-setting"></i>钱包
            </template>
            <el-menu-item index="3-1">零钱</el-menu-item>
            <el-menu-item index="3-2">银行卡</el-menu-item>
            <el-menu-item index="3-3">账单</el-menu-item>
          </el-submenu>
          <el-submenu index="4" v-if="Object.keys(this.thisPower).length!=0">
            <template slot="title">
              <i class="el-icon-setting"></i>酒席管理
            </template>
            <el-menu-item index="4-1">申请管理</el-menu-item>
            <el-menu-item index="4-2">举报管理</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-setting"></i>系统管理
            </template>
            <el-menu-item index="5-1" v-if="Object.keys(this.thisPower).length!=0">用户管理</el-menu-item>
            <el-menu-item index="5-2" v-if="Object.keys(this.thisPower).length!=0">字典管理</el-menu-item>
            <el-menu-item index="5-3" v-if="Object.keys(this.thisPower).length!=0">城市管理</el-menu-item>
            <el-menu-item index="5-4">退出登录</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main><user-view></user-view></el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
import UserView from "./UserView.vue";
import {getPowers} from '@/api/indexx'
export default {
  components: { UserView },
  data() {
    return {
      visible: false,
      powers:[],
      thisPower:{},
    };
  },
  methods: {
    switchPowerName(index){
      this.visible=false
      if(index===null){
        this.thisPower={}
        return;
      }
      this.thisPower=this.powers[index]
    }

  },
  mounted() {
    getPowers().then((result) => {
      console.log(result.data);
    })
  },
};
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 300px;
}
</style>